<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Lists example</title>

    <!-- Photon.css -->
    <link rel="stylesheet" href="/dist/css/photon.css">

    <style>
      .sidebar {
        background-color: #f5f5f4;
      }
    </style>
  </head>
  <body>
    <div class="window">
      <div class="window-content">
        <div class="pane-group">
          <div class="pane pane-sm sidebar">
            <ul class="list-group">
              <li class="list-group-header">
                <input class="form-control" type="text" placeholder="Search for someone">
              </li>
              <li class="list-group-item active">
                <img class="img-circle media-object pull-left" src="/assets/img/avatar.jpg" width="32" height="32">
                <div class="media-body">
                  <strong>List item title</strong>
                  <p>Lorem ipsum dolor sit amet.</p>
                </div>
              </li>
              <li class="list-group-item">
                <img class="img-circle media-object pull-left" src="/assets/img/avatar2.png" width="32" height="32">
                <div class="media-body">
                  <strong>List item title</strong>
                  <p>Lorem ipsum dolor sit amet.</p>
                </div>
              </li>
              <li class="list-group-item">
                <img class="img-circle media-object pull-left" src="/assets/img/avatar3.jpg" width="32" height="32">
                <div class="media-body">
                  <strong>List item title</strong>
                  <p>Lorem ipsum dolor sit amet.</p>
                </div>
              </li>
              <li class="list-group-item">
                <img class="img-circle media-object pull-left" src="/assets/img/avatar4.jpg" width="32" height="32">
                <div class="media-body">
                  <strong>List item title</strong>
                  <p>Lorem ipsum dolor sit amet.</p>
                </div>
              </li>
              <li class="list-group-item">
                <img class="img-circle media-object pull-left" src="/assets/img/avatar5.png" width="32" height="32">
                <div class="media-body">
                  <strong>List item title</strong>
                  <p>Lorem ipsum dolor sit amet.</p>
                </div>
              </li>
              <li class="list-group-item">
                <img class="img-circle media-object pull-left" src="/assets/img/avatar6.jpg" width="32" height="32">
                <div class="media-body">
                  <strong>List item title</strong>
                  <p>Lorem ipsum dolor sit amet.</p>
                </div>
              </li>
            </ul>
          </div>
          <div class="pane">
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
